<template>
  <div id="forget">
    <div class="hong">
      <div class="login">
        <div class="header">忘记密码</div>
        <div class="center">
          <div class="box1">邮箱：
            <input type="text" v-model="email" placeholder="请输入你绑定的邮箱帐号">
            <button class="verify" @click="verification" :disabled='isSend' :class="{'send-sms' : isSend, 'no-send-sms': isSend}">{{btntxt}}</button>
          </div>
          <div class="box2">验证码：<input type="password" v-model="code" placeholder="请输入验证码"></div>
        </div>
        <div class="footer">
          <div class="btn" @click="repassword">重置密码</div>
        </div>
        <!-- <div class="mouse"><img src="../assets/image/bgcimg.3.jpg" alt=""></div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'forget',
  data () {
    return {
      btntxt: '发送验证码',
      isSend: false,
      sendSMSTime: 0,
      email: '',
      code: ''
    };
  },
  methods: {
    verification () {
      let re = /(\S)+[@]{1}(\S)+[.]{1}(\w)+/;
      if (!re.test(this.email)) {
        this.$message({message: '邮箱不合法',type: 'error'});
      } else {
        this.sendmes();
				this.sendSMSTime = 60;
				this.isSend = true;
				this.disabled = true;
				this.btntxt = '已发送(' + this.sendSMSTime + ')s';
				this.timer();	
				this.disabled = false;	
			}			
    },
    // 发送验证码请求数据
    sendmes () {
      this.axios.post('Login/send_email',{
        email: this.email
      })
      .then(({data}) => {
        console.log(data);
        if (data.status === '1') {
          this.$message({message: '没有该邮箱',type: 'error'});
        } else if (data.status === '2') {
          this.$message({message: '操作成功',type: 'success'});
        } else if (data.status === '3') {
          this.$message({message: '操作失败',type: 'error'});
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    
    // 重置密码
    repassword () {
      this.axios.post('Login/cz_password',{
        email: this.email,
        code: this.code
      })
      .then(({data}) => {
        console.log(data);
        if (data.status === '1') {
          this.$message({message: '验证码错误',type: 'error'});
        } else if (data.status === '2') {
          this.$router.push({name:'rewrite',query:{uid: data.uid}});
          this.$message({message: '验证成功',type: 'success'});
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    timer () {
      if (this.sendSMSTime > 0) {
        this.sendSMSTime--;
        this.btntxt = `已发送(${this.sendSMSTime})s`;
        setTimeout(() => {
          this.timer();
        }, 1000);
      } else {
        this.sendSMSTime = 0;
        this.btntxt = '重新获取';
        this.isSend = false;
      }
    }
  }

};
</script>

<style lang="scss">
 #forget {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('../assets/image/bgc123.jpg') no-repeat;
    background-size: 100% 100%;
    &:after{
        content: "";
        width: 652px;
        height: 374px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top:20vh;
        background: inherit;
        filter: blur(30px);/*为了模糊更明显，调高模糊度*/
        z-index: 0;
      }
    .hong {
      width: 100%;
      height: 374px;
      margin: 20vh auto;
      .login {
      width:652px;
      background:linear-gradient(169.4deg,rgba(251,251,251,0.1),rgba(217,217,217,0.1));
      box-shadow:0px 10px 30px 0px rgba(0,0,0,0.3);
      border-radius:5px;
      margin: 0 auto;
      position: relative;
      text-align: center;
      z-index: 99;
      .header {
        width:593px;
        height:75px;
        font-size:30px;
        font-weight: 700;
        font-family:MicrosoftYaHei-Bold;
        color:rgba(0,0,0,1);
        margin: 0 auto;
        line-height:75px;
        border-bottom: 1px solid rgba(153,153,153,1);
      }
     .center {
      margin-top: 40px;
      .box2 {
      margin-top: 20px;
      margin-left: -90px;
      }
      .verify {
        width:75px;
        height:27px;
        box-shadow:0px 0px 8px 0px rgba(0,0,0,0.3);
        background-color: #fff;
        border-radius: 3px;
      }
       input{
        width:283px;
        height:33px;
        background:rgba(255,255,255,1);
        border-radius:2px;
        padding-left: 10px;
        box-sizing: border-box;
        border:1px solid rgba(153,153,153,0.6);
       }
     }
     .footer {
       display: flex;
       justify-content: center;
       margin-top: 50px;
       line-height: 42px;
      .btn {
        cursor: pointer;
        width:167px;
        height:42px;
        background:linear-gradient(-90deg,rgba(255,68,63,1),rgba(224,3,0,1));
        border-radius:4px;
        text-align: center;
        color: #fff;
        font-size:15px;
        margin-right: 25px;
        // margin-left: 25px;
        margin-bottom: 80px;
      }
     }
    .mouse {
      z-index: -1;
      position: absolute;
      right: -124px;
      bottom: -217px;
    }
    } 
  }    
}
</style>
